<template>
  <div class="app-container">
    <el-card class="form-container" shadow="never">
      <el-form :model="album" label-width="120px" :rules="rules" ref="albumInfoForm">
        <el-form-item label="专辑名称" prop="albumName">
          <el-input v-model="album.albumName"></el-input>
        </el-form-item>
        <!-- 演员名字开始 -->
        <el-form-item label="演员名字" prop="actorId">
          <el-select v-model="album.actorId" filterable placeholder="请选择">
            <el-option
              v-for="item in actorList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 演员名字结束 -->
        <!-- 上传封面开始 -->
        <el-form-item label="专辑封面">
          <single-upload v-model="album.cover"></single-upload>
        </el-form-item>
        <!-- 选择标签开始 -->
        <el-form-item label="标签" prop="tagId">
          <el-select v-model="album.tagId" multiple placeholder="请选择">
            <el-option
              v-for="item in tagList"
              :key="item.id"
              :label="item.tag"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 选择标签结束 -->
        <!-- 上传封面结束 -->
        <el-form-item label="是否上线">
          <el-select v-model="album.online" placeholder="请选择">
            <el-option :value="1" label="是" />
            <el-option :value="0" label="否" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            :disabled="saveBtnDisabled"
            type="primary"
            @click="saveOrUpdate"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import albumApi from "@/api/album";
import ImageCropper from "@/components/ImageCropper";
import PanThumb from "@/components/PanThumb";
import tags from "@/api/tags";
import actor from "@/api/actor";
import SingleUpload from "@/components/Upload/singleUpload";

export default {
  components: {
    ImageCropper,
    PanThumb,
    SingleUpload
  },
  data() {
 
     return {
      //查询出来的演员列表
      actorList: null,

      //是否显示头像标签
      avatarShow: false,
      album: {
        albumName: "",
        cover: "",
        online: 1,
        tagId: [],
        actorId: "",
      },
      dialogImageUrl: "",
      dialogVisible: false,
      // //弹窗组件是否显示
      // imagecropperShow: false,
      // //上传组件的KEY
      // imagecropperKey: 0,
      //获取服务器地址
      UPLOAD_URL: process.env.UPLOAD_URL,
      BASE_API: this.$VUE_APP_BASE_API,
      //是否禁用保存按钮
      saveBtnDisabled: false,
      //loading按钮
      loading: false,

      tagList: {},
      rules: {
        albumName: [
          { required: true, message: "请输入专辑名称", trigger: "blur" },
        ],
        actorId: [{ required: true, message: "请选择演员", trigger: "change" }],
        tagId: [{ required: true, message: "请选择标签", trigger: "change" }],
      },
    };
  },
  created() {
    //判断路由参数
    //判断路径中是否有ID值
    if (this.$route.params && this.$route.params.id) {
      console.log(this.$route.params.id);
      this.avatarShow = true;
      const id = this.$route.params.id;
      this.getAlbumInfo(id);
    }
    this.getTagList();
    this.getActorList();
  },
  methods: {
    //查询所有演员信息
    getActorList() {
      actor.getAllActors().then((res) => {
        console.log(res);
        this.actorList = res.data.result;
      });
    },
    //获取所有标签
    getTagList() {
      tags.getAllTag().then((res) => {
        console.log(res);
        this.tagList = res.data.result;
      });
    },

    getAlbumInfo(id) {
      //获得全部tag标签
      this.getTagList();
      albumApi.getAlbumById(id).then((res) => {
        console.log("修改数据", res.data.result);
        this.album.id = res.data.result.id;
        this.album.albumName = res.data.result.albumName;
        this.album.cover=res.data.result.cover;
        this.album.online = res.data.result.online;
        this.album.actorId=res.data.result.actorId

        for (let item of res.data.result.wallpaperTags) {
          this.album.tagId.push(item.id);
        }
        //this.album.tagId= this.album.wallpaperTags.id
      });
    },
    saveOrUpdate() {
      //判断album是否存在ID 有ID则证明是更改，无ID则证明是添加，
      if (!this.album.id) {
        //调用添加方法
        this.saveAlbum();
      } else {
        //调用更改方法
        this.updateAlbum();
      }
    },
    //保存专辑
    saveAlbum() {
      this.$refs['albumInfoForm'].validate((valid) => {
        if (valid) {
          albumApi.addAlbum(this.album).then((res) => {
            console.log("album", this.album);
            this.$message.success("添加成功");
          });
          saveBtnDisabled: true;
          //跳转到list界面
          this.$router.push({ path: "/album/table" });
        }else{
          this.$message.error("请添加必要参数");
          false;
        }
      });
    },
    //更改专辑
    updateAlbum(formName) {
      console.log(this.album.cover);
      albumApi.updateAlbum(this.album).then((res) => {
        this.$message.success("修改成功");

        saveBtnDisabled: true;
        //跳转到list界面
        this.$router.push({ path: "/album/table" });
      });
    },
  },
};
</script>
